<script lang="ts" setup>
import { ref, computed } from 'vue'
import { NPageHeader } from 'naive-ui'
import Step1 from '@/views/LLMStudio/datasets/components/step1.vue'
import Step2 from '@/views/LLMStudio/datasets/components/step2.vue'
import Step3 from '@/views/LLMStudio/datasets/components/step3.vue'
interface Props {
  show: boolean
}

const props = withDefaults(defineProps<Props>(), {
  show: false
})

const emit = defineEmits(['update:show'])

const showModalValue = computed({
  get: () => props.show,
  set: (value: boolean) => {
    emit('update:show', value)
  }
})

const current = ref(1)
const currentStatus = ref('process')

function handleBack() {
  // 处理返回逻辑
  showModalValue.value = false
}
</script>

<template>
  <n-modal
    v-model:show="showModalValue"
    class="rounded-3xl"
    style="width: 95vw; height: 95vh"
    preset="card"
    close-on-esc
  >
    <div class="flex h-full w-full">
      <div class="w-250px flex flex-col items-center">
        <n-page-header title="返回页面" @back="handleBack" class="mb-15px w-full" />
        <n-steps vertical :current="current" :status="currentStatus" class="w-200px">
          <n-step title="选择数据源" />
          <n-step title="文本分段与清洗" />
          <n-step title="处理并完成" />
        </n-steps>
      </div>
      <div class="flex flex-col flex-1 h-full">
        <Step1
          v-if="current === 1"
          class="flex-1 h-full w-full p-10px"
          @nextStep="current += 1"
        ></Step1>

        <Step2
          v-if="current === 2"
          class="flex-1 h-full w-full p-10px"
          @nextStep="current += 1"
          @prevStep="current -= 1"
        ></Step2>

        <Step3
          v-if="current === 3"
          class="flex-1 h-full w-full p-10px"
          @nextStep="showModalValue = false"
        ></Step3>
      </div>
    </div>
  </n-modal>
</template>

<style lang="scss" scoped>
$primary-color: #f5f5f5;
.radio-item {
  display: flex;
  padding: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1.5px solid #528bff;
  background-color: #f5f8ff;

  &:hover {
    background-color: rgba($primary-color, 0.08);
    box-shadow:
      0 4px 6px -1px rgba(0, 0, 0, 0.1),
      0 2px 4px -1px rgba(0, 0, 0, 0.06);
  }

  &-icon {
    border: 0.5px solid #e0eaff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3px;
    background-color: #f5faff;
  }
}
</style>
